import { Button, Form, Input } from 'antd';
import {useHistory} from 'dva'
import {LoginParams} from './login.type'
import Api from '@/api/index'
import { useDispatch ,useSelector} from 'dva'; 

import './login.css'
import { IGlobalState } from '@/model/type';


export default function Layout(){
    const history =useHistory()
    const dispatch = useDispatch()
    const globalState = useSelector<{global:IGlobalState },IGlobalState>(({global})=>global)
    const onLogin = async(values: LoginParams) => {
        console.log('Success:', values);
        const data = await Api.login(values)
        dispatch({
            type:'global/setUserInfo',
            payload:{
                ...data
            }
        })
      };
      
      const onCancel = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
      };
    

    return (
        <div className='login-containner'>
            <div className="login-form">    
            <div className="login-title">活动管理平台</div>
                <Form
                name="basic"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 16 }}
                style={{ maxWidth: 600 }}
                initialValues={{ remember: true }}
                onFinish={onLogin}
                onFinishFailed={onCancel}
                autoComplete="off"
                >
                <Form.Item<LoginParams>
                label="用户名"
                name="username"
                rules={[{ required: true, message: '请输入' }]}
                >
                <Input />
                </Form.Item>

                <Form.Item<LoginParams>
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入' }]}
                >
                <Input.Password />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit" >
                    登录
                </Button>
                <Button  >
                    取消
                </Button>
                </Form.Item>
                </Form>
            </div>
        </div>
    )
}